<template>
    <div class="inputFrame">
        <el-input v-model="sendText" rows="5" resize="none" type="textarea" placeholder="请畅所欲言:" />
        <el-button class="SendBtn" color="#55aa00" type="primary" @click="handleSendMessage" plain>
            发送
            <el-icon>
                <Promotion />
            </el-icon>
        </el-button>
    </div>
</template>

<script setup>
import { defineEmits, ref } from 'vue';

import {
    ElMessage
} from 'element-plus'

// 发送文本
let sendText = ref("");

const emits = defineEmits(['handleSendMessage']);

const handleSendMessage = () => {
    if (sendText.value == "") {
        ElMessage({
            message: '不能发送空消息~',
            type: 'warning',
        })
    } else {
        emits('handleSendMessage', sendText.value);
        sendText.value = "";
    }
};
</script>

<style scoped>
.inputFrame {
    width: 100%;
    height: 100%;
}

.SendBtn {
    position: absolute;
    bottom: 50px;
    right: 30px;
}

div {
    display: flex;
    align-items: center;
}

.el-input__inner {
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 10px;
    height: 100px;
    /* 设置输入框高度为 100px */
}

.el-button {
    font-size: 14px;
    padding: 8px 15px;
    margin-left: 10px;
    color: #55aa00;

    &:hover {
        background-color: #449d44;
        color: #fff;
    }
}
</style>